<template>
    <div class="container-box-container">
        <div class="control-area border-radius8">
            <div class="flex-box flex-center flex-align-items-center" style="justify-content: space-around;">
                <!-- <div> -->
                    <div class="margin320 width-25 text-center rightBorder">
                        <p class="fontSize16 color333">出租中</p>
                        <p class="fontSize30 colorMain line-height55 margin0">{{statisticsObj&&statisticsObj.leaseInTotal ? statisticsObj.leaseInTotal : 0}}</p>
                    </div>
                    <div class="margin320 width-25 text-center rightBorder" >
                        <p class="fontSize16 color333">已出租</p>
                        <p class="fontSize30 colorMain line-height55 margin0">{{statisticsObj&&statisticsObj.sellTotal ? statisticsObj.sellTotal : 0}}</p>
                    </div>
                <!-- </div> -->
                <!-- <div> -->
                    <div class="margin320 width-25 text-center rightBorder" style="margin-left:10px">
                        <p class="fontSize16 color333">住户车位</p>
                        <p class="fontSize30 colorMain line-height55 margin0">{{statisticsObj&&statisticsObj.zhCarTotal ? statisticsObj.zhCarTotal : 0}}</p>
                    </div>
                    <div class="margin320 width-25 text-center ">
                        <p class="fontSize16 color333">物业车位</p>
                        <p class="fontSize30 colorMain line-height55 margin0">{{statisticsObj&&statisticsObj.wyCarTotal ? statisticsObj.wyCarTotal : 0}}</p>
                    </div>
                <!-- </div> -->
            </div>
        </div>
        <Page class="main_content">
            <PageCard title="车位租赁列表" class="margin0">
                <template #actions>
                <el-button class="ed-button ed_black-bottom ed-button36" @click="add()" v-has="'property:parkingRent:add'"><svg-icon icon-class="add-svg"/>新增</el-button>
                </template>
                <div class="content">
                    <div class="search_box">
                        <!-- <HousePicker class="mr-2" ref="housePicker" multiple v-model="queryForm.rooms" @input="houseInput"/> -->
                        <EdSelect v-model="queryForm.villageId" ref="selectpatrol" :selectParams="villageNameParams" @emit-select-value="projectChange" ></EdSelect>
                        <el-input v-model="queryForm.parkingSpacesNo" placeholder="请输入车位编号" />
                        <EdSelect v-model="queryForm.parkingSpacesBelong" :selectParams="selectRentMethod"></EdSelect> 
                        <EdSelect v-model="queryForm.parkingStatus" :selectParams="selectStatus"></EdSelect>                        
                        <EdDateTimePickerRange v-model="queryForm.pickerTime"  @emit-echo-time-range="emitEchoTimeDate($event, 'pickerTime')" :pickerParams="pickerRangeParams"></EdDateTimePickerRange>
                        <el-button class="ed-button ed_black-bottom" @click="search()"><svg-icon class="svg-middle" icon-class="search-svg"/>查 询</el-button>
                        <el-button class="ed-button ed_white_bottom" @click="reset()"><svg-icon icon-class="reset-svg"/>重 置</el-button>
                    </div>
                    <ApiTable :api="load" ref="table" :params="queryForm">
                        <el-table-column type="index" width="80" label="序号"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="villageName" label="所属项目" :formatter="formatter"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="parkingSpacesNo" label="车位编号" :formatter="formatter"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="parkingSpacesBelong" label="出租方式">
                            <template slot-scope="scope">
                                <span v-if="scope.row.parkingSpacesBelong=='1'">物业</span>
                                <span v-if="scope.row.parkingSpacesBelong=='2'">住户</span>
                                <!-- <span>{{returnName(scope.row['rentMethod'], selectRentMethod.options) || scope.row['rentMethod'] || '-'}}</span> -->
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="rent" label="租金/月" ></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="createTime" label="创建时间"></el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="parkingStatus" label="状态">
                            <template slot-scope="scope">
                                <div><span :class="['spanLabel spanLabelWidth marginRight8', 'spanLabelColor'+scope.row.parkingStatus]"></span>{{returnName(scope.row['parkingStatus'], selectStatus.options) || scope.row['status'] || '-'}}</div>
                                <!-- <span>{{returnName(scope.row['status'], selectStatus.options) || scope.row['status'] || '-'}}</span> -->
                            </template>
                        </el-table-column>
                        <el-table-column :show-overflow-tooltip="true" prop="" label="操作" width="300">
                            <template slot-scope="scope">
                                <el-button class="ed-table-bottom ed_blue_border" v-has="'property:parkingRent:check'" v-if="scope.row.parkingStatus==0" @click="rentCheck(scope.row)">认证</el-button>
                                <el-button class="ed-table-bottom ed_blue_border" v-has="'property:parkingRent:detail'" v-if="scope.row.parkingStatus==1 || scope.row.parkingStatus==2 || scope.row.parkingStatus==3 || scope.row.parkingStatus==4" @click="seeRow(scope.row)">查看</el-button>
                                <el-button class="ed-table-bottom ed_delete_border" v-has="'property:parkingRent:del'" :disabled="scope.row.parkingStatus==0 || scope.row.parkingStatus==1 || scope.row.parkingStatus==2" @click="del(scope.row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </ApiTable>
                </div>
            </PageCard>
            <EdConfirmDelete ref="confirmDeleteRef" @confirmDeleteTrue="confirmDeleteTrue"></EdConfirmDelete>
        </Page>
    </div>
</template>

<script>
    import EdTable from "src/components/EdTable.vue";
    import EdSelect from 'src/components/EdSelect.vue'
    import HousePicker from 'src/components/HousePicker/index.vue'
    import EdDateTimePickerRange from 'src/components/EdDateTimePickerRange.vue'  
    import * as api from './api'  
    // import {houseRentList, getStaticsData, houseRentInfo, houseRentDel} from "./api";
    import Page from '../../components/Page.vue'
    import PageCard from 'src/views/components/PageCard.vue'
    import ApiTable from 'src/components/ApiTable.vue'
    import { defineComponent } from 'vue'
    import EdConfirmDelete from "src/components/EdConfirmDelete.vue";
    import { returnName } from "src/utils/common.js";
    import { getDictByCode } from "src/api/dictionaries";
    export default defineComponent({
        name: "OrderList",
        components:{ EdTable, Page, PageCard, ApiTable,EdSelect, EdDateTimePickerRange, HousePicker,EdConfirmDelete },
        data(){
            return{
                queryForm:{
                    villageId:'',
                    villageName:'',
                    rooms: undefined,
                    parkingSpacesNo:"",
                    parkingSpacesBelong: '',
                    pickerTime: '',
                    startTime:"",
                    endTime:"",
                },
                pickerRangeParams:{
                    valueFormat:"yyyy-MM-dd HH:mm"
                },
                statisticsObj: {
                    leaseInTotal: '',
                    sellTotal: '',
                    zhCarTotal:'',
                    wyCarTotal:''
                },
                selectStatus:{  // 状态
                    placeholder:"请选择状态",
                    options: [
                        { value: '0', label: '未认证' },
                        { value: '1', label: '出租中' },
                        { value: '2', label: '已出租' },
                        { value: '3', label: '已取消' },
                        { value: '4', label: '已拒绝' },
                    ]
                },
                selectRentMethod:{  // 请选择车位所属
                    placeholder:"请选择车位所属",
                    options: [
                        { value: '1', label: '物业' },
                        { value: '2', label: '住户' },
                    ]
                },
                villageNameParams:{
                    placeholder:"请选择项目",
                    options: [],
                    props: {label:"villageName", value:"villageId"},
                },
                // textarea:''
            }
        },
        activated(){
            this.projectList()
            this.getStaticsData();
            this.$nextTick(()=>{
                this.$refs.table.load(1)
            })
        },
        methods:{
            load:api.parkingRentList,
            getStaticsData(){
                api.getStaticsData({}).then(response => {
                    if(response.success) {
                        this.statisticsObj ={...response.data}
                    }
                })
            },
            search(){
                this.$refs.table.load()
            },
            reset(){
                this.queryForm = {};
                // this.$refs.timeRange.reset();
                this.$nextTick(()=>{
                    this.$refs.table.load(1,10)
                })
            },
            add(){
                this.$router.push({
                    path: '/property/parkingRent-add',
                    query: {},
                })
            },
            seeRow(row){
                this.$router.push({
                    path: '/property/parkingRent-detail',
                    query: {parkingStatus:row.parkingStatus,id:row.id},
                })
            },
            rentCheck(row){
                this.$router.push({
                    path: '/property/parkingRent-check',
                    query: {parkingStatus:row.parkingStatus,id:row.id},
                    // query: {id:row.id},
                })
            },
            returnName(val, options, value, label){
                return returnName(val, options, value, label)
            },
            emitEchoTimeDate(data){
                // $event 子组件$emit传的参数 
                this.queryForm['startTime'] = data.startTime;
                this.queryForm['endTime'] = data.endTime;
            },
            formatter(row, column, cellValue, index){
                return cellValue || '-'
            },
            houseInput(data){
                console.log('=====',data);
            },
            del(row){
            this.confirmRow = row;
            this.$refs.confirmDeleteRef.open("删除确认","确认删除此项数据？","warning")
            },
            // 删除回调
            confirmDeleteTrue(){
                api.parkRentDelete({id: this.confirmRow.id}).then(response => {
                    if(response.success == true) {
                        this.$message.success({ 
                            message: '删除成功！',
                            duration: 2000,
                            center:true
                        });
                        this.$refs.table.load()
                    }
                })
            },
            projectList(){
                api.projectList({page:1,pageSize:999999}).then(response => {
                    if(response.success) {
                        let options = response.data.records.map(x=>{return {villageName:x.villageName,villageId:x.villageId}})
                        this.villageNameParams.options=options
                    }
                })
            },
            projectChange(row) {
                let option = this.villageNameParams.options.find(x=>x.villageId==row)
                console.log(option);
                this.queryForm.villageName = option.villageName
            },
    }
})
</script>

<style scoped lang="scss">
    .spanLabel{
        width: 8px;height: 8px;border-radius: 50%;display: inline-block;vertical-align: 1px
    }
    .spanLabelWidth{
        width: 6px;height: 6px;
    }
    .titleTop{
        border: 1px solid rgba(0, 0, 0, 0.65);width: 14px;height: 14px;line-height: 14px;
        border-radius: 50%;font-size: 12px;text-align: center;display: inline-block;vertical-align: 1px;margin-left: 4px;
    }

    .titleTopBorderColor1{
        border-color: rgba(0, 0, 0, 0.65);
    }
    .titleTopBorderColor2{
        border-color: #FAAD14;
    }
    .titleTopBorderColor3{
        border-color: #52C41A;
    }
    .titleTopBorderColor4{
        border-color: #1890FF;
    }
    .titleTopBorderColor5{
        border-color: #B7B7B7;
    }
    .spanLabelColor0{
        background-color: #EE7171 !important;
    }
    .spanLabelColor1{
        background-color: #EED096 !important;
    }
    .spanLabelColor2{
        background-color: #414448 !important;
    }
    .spanLabelColor3{
        background-color: #B9B9B9 !important;
    }
    .spanLabelColor4{
        background-color: #B9B9B9 !important;
    }
    .colorMain{
        color: #DDB15C !important;
    }
    :deep .main_content {
        >.header{
            display:none !important;
        }
        .search_box{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: 20px;
            >div{
                margin-right: 10px;
            }
        }
        .content .el-input {
            width: unset;
        }
    }
</style>